@import "../comm.scss";

.pay-skeleton {
	width: 100%;
	&::before {
		@include common();
	}
	background: #f6f6f6;
	height: 100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	padding: 0 0.25rem;
	&-header {
		height: 1.86rem;
		background: #fff;
		border-radius: 8px;
		margin: 0.16rem 0 0.2rem 0;
		display: grid;
		place-items: center;
		&-title {
			width: 2.54rem;
			height: 0.36rem;
			background-color: $color;
			border-radius: 0.18rem;
		}
		&-money {
			width: 2rem;
			height: 0.6rem;
			background-color: $color;
			margin: 0.1rem;
			border-radius: 0.3rem;
		}
	}
	&-content {
		background: #fff;
		// padding: 0 0.42rem;
		box-sizing: border-box;

		&-top,
		&-bottom {
			height: 0.92rem;
			display: flex;
			justify-content: space-between;
			margin: 0.2rem;
			align-items: center;
			div {
				background-color: $color;
				height: 0.36rem;
				width: 1.78rem;
				border-radius: 0.18rem;
			}
			div:last-child {
				width: 1.18rem;
			}
		}
		&-bottom {
			border-top: 1px solid #e9e9e9;
			div:first-child {
				width: 1.02rem;
			}
		}
	}
	.pay-skeleton-keywords {
		margin-top: 0.42rem;
		&-top {
			width: 1.02rem;
			height: 0.36rem;
			margin: 0 0.66rem;
			background-color: $color;
			border-radius: 0.18rem;
		}
		&-bottom {
			display: flex;
			margin-top: 0.16rem;
			margin-bottom: 0.56rem;
			span {
				flex: 1;
				box-sizing: border-box;
				border: 1px solid #e9e9e9;
				background-color: #fff;
				height: 1.19rem;
			}
		}
	}
	.pay-skeleton-button {
		margin: 0 auto;
		width: 6.38rem;
		height: 1rem;
		background: $color;
		border-radius: 0.5rem;
	}
	.pay-skeleton-change-pay {
		width: 1.28rem;
		height: 0.36rem;
		background-color: $color;
		margin: 0.64rem auto;
		border-radius: 0.18rem;
	}
}
.home-flicker {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	// background-image: linear-gradient(
	//     120deg,
	//     rgba(255, 255, 255, 0.25) 25%,
	//     rgba(255, 255, 255, 1) 37%,
	//     rgba(255, 255, 255, 0.25) 63%
	// );
	// background-size: 400% 100%;
	// background-position: 100% 50%;
	// animation: skeleton-loading 1.4s ease infinite;
}
// @keyframes skeleton-loading {
//     0% {
//         background-position: 100% 50%;
//     }
//     100% {
//         background-position: 0 50%;
//     }
// }
